<template>
    <el-button type="primary" @click="addBanner">添加轮播图</el-button>
    <el-table :data="filteredTableData" style="width: 100%">
        <!-- prop：后端返回的数据的字段名  label代表自定义的表头的名字 -->
        <el-table-column label="序号">
            <template #default="scope">
                {{ scope.$index + 1 }}
            </template>
        </el-table-column>
        <el-table-column label="图片展示" prop="img">
            <template v-slot:default="scope">
                <img :src="scope.row.img" width="80px">
            </template>
        </el-table-column>
        <el-table-column label="提示信息" prop="alt">
            <template v-slot:default="scope">
                {{ scope.row.alt }}
            </template>
        </el-table-column>
        <el-table-column label="跳转地址" prop="link">
        </el-table-column>
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="请输入" />
            </template>
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                    Edit
                </el-button>
                <el-popconfirm title="确认删除吗?" placement="right" @confirm="handleDelete(scope.row)">
                    <template #reference>
                        <el-button size="small" type="danger">
                            Delete
                        </el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
</template>

<script lang="ts" setup>
import { getBannerList, removeBanner } from '@/apis/banner'
import { reactive, ref } from 'vue'
import type { IBanner } from '@/types/banner'
import router from '@/router'
import { ElMessage } from 'element-plus'
import { onMounted } from 'vue'
import { computed } from 'vue'

const loadBannerList = async () => {
    const res = await getBannerList()
    tableData.value = res.data.data ?? []
}
onMounted(loadBannerList)

const search = ref('')

const handleEdit = (index: number, row: IBanner) => {
    console.log(index, row)
}
const handleDelete = async (row: IBanner) => {
    try {
        await removeBanner(row.bannerid)
        ElMessage.success('删除成功');
        await loadBannerList()
        console.log(111);

    } catch (error) {
        ElMessage.success('删除失败');
        console.log(222);

    }
}

// let tableData=reactive([]) //tableData,使用reactive包裹的数据是响应式数据
let tableData = ref<IBanner[]>([]) //tableData,使用reactive包裹的数据是响应式数据
getBannerList().then(res => {
    console.log(res);
    console.log(res.data.data);
    tableData.value = res.data.data
})
const addBanner = () => {
    router.push("/banner/add")
}

const filteredTableData = computed(() =>
    tableData.value.filter(
        (item) =>
            item.alt.toLowerCase().includes(search.value.toLowerCase()) ||
            item.link.toLowerCase().includes(search.value.toLowerCase())
    )
)
</script>

<style></style>